<template>
  <div v-if="item.children" :class="[isCollapse ? 'el-menu--collapse' : '']">
    <el-submenu  v-if="!isShowChild(item.children)" :index="item.path">
      <template #title>
        <i class="el-icon-location"></i>
        <span>{{item.meta.title}}</span>
      </template>
      <template  v-for="child in item.children" :key="child.path">
        <div v-if="!child.meta.hidden">
          <slider-item v-if="child.children && child.children.length > 0" :item="child" :basePath='resolvePath(child.path)' />
          <router-link :to="child" v-else>
            <el-menu-item :index="resolvePath(child.path)">
              <i class="el-icon-location"></i>
              <span>{{child.meta.title}}</span>
            </el-menu-item>
          </router-link>
        </div>
      </template>
    </el-submenu>
    <router-link :to="onlyOneChild" v-else>
      <el-menu-item :index="resolvePath(onlyOneChild.path)">
        <i class="el-icon-location"></i>
        <template #title>{{onlyOneChild.meta.title}}</template>
      </el-menu-item>
    </router-link>
  </div>
</template>
<script lang='ts'>
import { RouteLocationMatched } from 'vue-router';
import { defineComponent, ref } from 'vue';
import path from 'path'
export default defineComponent({
  name: 'slider-item',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
      required: true
    },
    basePath: {
      type: String,
      default: ''
    },
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // 判断是否需要展示child
    const onlyOneChild = ref<any>() // 存仅有一个children的时候
    const isShowChild = (item: RouteLocationMatched[]) => {
      const showList = item.filter(items => {
        if (items.meta.hidden) {
          return false
        } else {
          onlyOneChild.value = items
          return true
        }
      })
      if(showList.length == 1) {
        return true
      }else {
        return false
      }
    }
    // 处理菜单中index后可以选中和打开
    const resolvePath = (paths: string) => {
      return path.resolve(props.basePath, paths)
    }
    return{
      isShowChild,
      resolvePath,
      onlyOneChild,
    }
  },
});
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  &.active {
    border-right: 3px solid blue;
    color: blue;
  }
}
.item-title {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;/*超出部分隐藏*/
  white-space: nowrap;/*不换行*/
  text-overflow: ellipsis;/*超出部分文字以...显示*/
}
.left_icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
  margin: 0 10px;
}

.right_icon {
  display: inline-block;
  font-size: 20px;
  margin: 0 10px;
}
</style>
